<!DOCTYPE HTML>
<html>
   <head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>知果汇</title>
		<link href="_CSS_/bootstrap.min.css" rel="stylesheet">
		<link href="_CSS_/simple-line-icons.css" rel="stylesheet">
		<link href="_CSS_/font-awesome.min.css" rel="stylesheet">
		<link href="_CSS_/jasny-bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="_CSS_/nanoscroller.css">
		<link href="_CSS_/style.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="_CSS_/jquery-ui.css">
		<!--[if lt IE 9]>
		  <script src="_JS_/html5shiv.min.js"></script>
		  <script src="_JS_/respond.min.js"></script>
		<![endif]-->
		<style type="text/css">
			body{background-color: #ffffff;}
			.row{margin-left: 0px;margin-right: 0px;}
			.radio-box{display:inline-block;width: 64px;}
			.formControls{padding-right:50px; position: relative;}
			.textarea {height: 100px;resize: none;font-size: 14px;padding: 4px;}
			.textarea-numberbar {position: absolute;right: 70px;bottom: 5px;z-index: 1;margin-bottom: 0;}
			.upload-btn {width: 120px;height: 90px;margin: 0;border: 1px dashed #a9a9a9;}
			.upload-btn img{
				display: block;
				width: 50px;
				height: 35px;
				margin-top: 10px;
				margin-left: 35px;

			}
			.upload-btn input{
				position: absolute;
				top: 0;
				margin: 0;
				width: 120px;
				height: 90px;
				border: none;
				opacity: 0;
				filter: alpha(opacity=0);
				cursor: pointer
			}
			.upload-img{width:120px;height: 90px;}
			.upload-img p {
				width: 120px;
				font-size: 10px;
				line-height: 16px;
				margin-top: -35px;
				text-align: center;
			}
			.img-info img{
				width: 120px;
				height: 90px;
			}
			.file-panel {
				position: absolute;
				display: none;
				width: 120px;
				height: 90px;
				top: 0;
				overflow: hidden;
				z-index: 300;
			}
			.cancel {
				width: 120px;
				height: 90px;
				background-color: rgba( 0, 0, 0, 0.5 );
			}
			.table-btn,.table-btn:hover,.table-btn:focus{color: #ffffff;}
		</style>
    </head>
	<body>
	<article class="page-container">
		<form class="form form-horizontal" id="form-admin-add">
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">人才姓名：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="" placeholder="" id="talentname" name="talentname">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">性别：</label>
				<div class="formControls col-xs-8 col-sm-9 skin-minimal">
					<div class="radio-box">
						<input name="sex" type="radio" id="sex-1" value="1" >
						<label for="sex-1">男</label>
					</div>
					<div class="radio-box">
						<input type="radio" id="sex-2" name="sex" value="0">
						<label for="sex-2">女</label>
					</div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">上传图片：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<div class="upload-img">
						<div class="img-info"><img src=""/><div class="file-panel"><div title="删除图片" class="cancel"><a class="btn table-btn" style="font-size:18px;margin-top:170px;margin-left:250px;" title="删除图片" href="javascript:;"><i class="fa fa-trash-o"></i></a></div></div></div>
						<div class="upload-btn" style="display: none;">
							<img src="_IMG_/upload.jpg">
							<input type="file" name="img" id="file_img" onchange="previewImage(this,1)" accept="image/gif, image/jpeg, image/png" />
						</div>
						<p style="display: none;">上传图片大小不超过3M</p>
					</div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">人才标签：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="" placeholder="" id="label" name="label">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">职务：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="" placeholder="" id="duties" name="duties">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">所在省市：</label>
				<div class="formControls col-xs-8 col-sm-9"> <span class="select-box" style="width:150px;">
					<select class="select" id="area" name="area" size="1">
						<!--<option value="1">北京市</option>-->
						<!--<option value="2">天津市</option>-->
						<!--<option value="3">河北省</option>-->
						<!--<option value="4">山西省</option>-->
					</select>
					</span>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">研究领域：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="" placeholder="" name="field" id="field">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">工作单位：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="" placeholder="" name="workplace" id="workplace">
				</div>
			</div>

			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">人才库类别：</label>
				<div class="formControls col-xs-8 col-sm-9"> <span class="select-box" style="width:150px;">
					<select class="select" id="talentrole" name="talentrole" size="1">
						<option value="4">高级教授</option>
						<option value="5">高级讲师</option>
					</select>
					</span>
				</div>
			</div>

			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">主要学术著作及论文：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<textarea name="composition" id="composition" cols="" rows="" class="textarea"  placeholder="说点什么...150个字符以内" dragonfly="true" onKeyUp="textarealength(this,150)"></textarea>
					<p class="textarea-numberbar"><em class="textarea-length">0</em>/150</p>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">国内外学术团体任职情况：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<textarea name="office" id="office" cols="" rows="" class="textarea"  placeholder="说点什么..." dragonfly="true" ></textarea>

				</div>
			</div>
			<div class="row cl">
				<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
					<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;保存并发布&nbsp;&nbsp;">
					<input class="btn btn-warning radius" type="submit" value="&nbsp;&nbsp;保存为草稿&nbsp;&nbsp;">
					<input class="btn btn-cancel radius" style="color: #ffffff;background-color: #a0a0a0;" type="button" value="&nbsp;&nbsp;取消&nbsp;&nbsp;">
				</div>
			</div>
		</form>
	</article>

	<script src="_JS_/jquery.min.js"></script>
	<script src="_JS_/bootstrap.min.js"></script>
	<script src="_JS_/jasny-bootstrap.min.js"></script>
	<script src="_JS_/jquery.slimscroll.min.js"></script>
	<script src="_JS_/jquery.nanoscroller.min.js"></script>
	<script src="_JS_/metismenu.min.js"></script>
	<script src="_JS_/float-custom.js"></script>
	<script type="text/javascript" src="_JS_/layer/layer.js"></script>
	<script type="text/javascript" src="_JS_/jquery.validation/1.14.0/jquery.validate.min.js"></script>
	<script type="text/javascript" src="_JS_/jquery.validation/1.14.0/validate-methods.js"></script>
	<script type="text/javascript" src="_JS_/jquery.validation/1.14.0/messages_zh.min.js"></script>
	<script type="text/javascript" src="_JS_/jquery.form.js"></script>

<script type="text/javascript">
	$('.img-info').hover(function(){
		$(this).find(".file-panel").show();
	},function(){
		$(this).find(".file-panel").hide();
	});
	$(".cancel").on("click",function(){
		$('#file_img').val("");
		$(this).parents('.upload-img').find(".upload-btn").show();
		$(this).parents('.upload-img').find(".upload-img p").show();
		$(this).parents(".img-info").remove();

	});
	/*textarea 字数限制*/
	function textarealength(obj,maxlength){
		var v = $(obj).val();
		var l = v.length;
		if( l > maxlength){
			v = v.substring(0,maxlength);
			$(obj).val(v);
		}
		$(obj).parent().find(".textarea-length").text(v.length);
	}
	var url=window.location.href;
	user_id = url.split("#")[1];
	id = url.split("#")[2];
	sheet=2;
	$(function(){
		$.ajax({
			type: "get",
			url:"{:url('api/talent/province')}",
			data:{'sheet':sheet},
			dataType: 'jsonp',
			jsonp:'callback',
			success: function (msg) {
				if(msg.code == 200){
					var html="";
					for(var i=0;i<msg.data.provice.length;i++){
						 html +='<option value="'+msg.data.provice[i].id+'">'+msg.data.provice[i].province+'</option>';
					}
					$("#area").append(html);
//					for(var i=0;i<msg.data.type.length;i++){
//						var type='<option value="'+msg.data.type[i].id+'">'+msg.data.type[i].rolename+'</option>';
//						$("#talentrole").append(type);
//					}
				}
				if(msg.code==1000){
					layer.msg('查询失败!',{icon:1,time:1000});
				}
			}
		});
		//详情加载
		$.ajax({
			type: "get",
			url: "{:url('api/talent/talent_detail')}",
			dataType: 'jsonp',
			'jsonp':'callback',
			data:{'id':id},
			success: function (msg) {
				if(msg.code == 200){
					//编辑器准备好之后加载内容
					$('#talentname').val(msg.data.talentname);
					$('#duties').val(msg.data.duties);
					if(msg.data.sex==1){
						$('#sex-1').attr("checked","checked");
					}else{
						$('#sex-2').attr("checked","checked");
					}
					$('.img-info').find('img').attr("src","_SRC_/Talent/"+msg.data.img_url);
					$('#label').val(msg.data.label);
					$('#area').val(msg.data.area);
					$('#field').val(msg.data.field);
					$('#workplace').val(msg.data.workplace);
					$('#talentrole').val(msg.data.talentrole);
					$('#composition').val(msg.data.composition);
					$('#office').val(msg.data.office);
				}
				if(msg.code==1000){
					layer.msg('获取信息不成功!',{icon:1,time:2000});
				}
			}
		});

		$("#form-admin-add").validate({
			rules:{
				talentname:{
					required: true,
					minlength: 2

				},
				img:{
					required:true,
				},
				label:{
					required:true,
				},
				sex:{
					required:true,
				},
				duties:{
					required:true,
				},
				area:{
					required:true
				},
				field:{
					required:true
				},
				workplace:{
					required:true,
				},
				talentrole:{
					required:true,
				},
				composition:{
					required:true,
				},
				office:{
					required:true,
				},
			},
			messages: {
				talentname: {
					required: "请输入用户名",
					minlength: "用户名必需由两个字母组成",
					remote: "输入的用户名已经存在"
				},
				img:{
					required:"请上传图片",
				},
			}
		});


		$(".btn-cancel").click(function(){
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		});
	});
	/*发布按钮*/
	$('.btn-primary').on('click',function(){
		button(1);
	});
	/*保存按钮*/
	$('.btn-warning').on('click',function(){
		button(2);
	});
	function button(status){
		var talentname=$('#talentname').val();
		var label=$('#label').val();
		var duties=$('#duties').val();
		var field=$('#field').val();
		var workplace=$('#workplace').val();
		var composition=$('#composition').val();
		var office=$('#office').val();
		uid=user_id;
		if(talentname!=""&&label!=""&&duties!=""&&field!=""&&workplace!=""&&composition!=""&&office!=""&&uid!=""){
			$("form").ajaxSubmit({
				type: "post",
				url: "{:url('api/talent/talent_edit')}",
				dataType:"json",
				data:{'uid':user_id,'status':status,'id':id},
				success: function (msg) {
					if(msg.code == 200){
//						var index = parent.layer.getFrameIndex(window.name);
//						parent.newslist(1);
						layer.msg('修改成功!',{icon:1,time:1000});
						parent.window.location.reload();
					}
					if(msg.code==1000){
						layer.msg('添加失败!',{icon:2,time:1000});
					}
				}
			});
		}else{
			layer.msg('请完善发布内容!',{icon:0,time:1000});
		}
	}
	/* 图片预览*/
	function previewImage(obj,num){
		var filepath=$(obj).val();
		fileObj = document.getElementById('file_img');
		value = window.URL.createObjectURL(fileObj.files[0]);
		file_size = obj.files[0].size;
		size = file_size / 1024;
		if (size > 1024*2) {
			$('#file_img').val("");
			layer.alert('上传图片不得大于2MB', {
				closeBtn: 0
			});
		} else {
			$(obj).parents(".upload-img").prepend('<div class="img-info"><img src="'+value+'"/><div class="file-panel"><div title="删除图片" class="cancel"><a class="btn table-btn" style="font-size:18px;margin-top:170px;margin-left:250px;" title="删除图片" href="javascript:;"><i class="fa fa-trash-o"></i></a></div></div></div>');
			$(obj).parent(".upload-btn").hide();
			$(obj).parents(".upload-img").children('p').hide();

			$('.img-info').hover(function(){
				$(this).find(".file-panel").show();
			},function(){
				$(this).find(".file-panel").hide();

			});
			$(".cancel").on("click",function(){
				$('#file'+num).val("");
				$(this).parents('.upload-img').find(".upload-btn").show();
				$(this).parents('.upload-img').find(".upload-img p").show();
				$(this).parents(".img-info").remove();

			});
		}
	}


</script> 
</body>
</html>